import React, {Component} from 'react';
import {Modal, Button, Upload, Icon, message, Input} from 'antd';
import "../assets/css/phone.css"

class phone extends Component {
    constructor(prop) {
        super(prop);
        this.state = {
            deleteItem: "",
            showDelect: false,
            isLoading: false,
            showAddSeriver: false,
            imageUrl: "https://ss3.baidu.com/9fo3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=1cf3b8a1fa246b60640eb474dbfa1a35/b90e7bec54e736d18dd46afa97504fc2d4626979.jpg",
            uploadIng: false,
            isValueable: {
                isValueableName: true,
                errNameMsg: "",
                isValueablePhoen: true,
                errPhoneMsg: "",
            },
            waiterList: [
                {
                    imgUrl: "https://ss3.baidu.com/9fo3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=1cf3b8a1fa246b60640eb474dbfa1a35/b90e7bec54e736d18dd46afa97504fc2d4626979.jpg",
                    name: "001",
                    phoneNum: "13000000001",
                    waiterID: "001"
                },
                {
                    imgUrl: "https://ss3.baidu.com/9fo3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=1cf3b8a1fa246b60640eb474dbfa1a35/b90e7bec54e736d18dd46afa97504fc2d4626979.jpg",
                    name: "001",
                    phoneNum: "13000000001",
                    waiterID: "001"
                },
                {
                    imgUrl: "https://ss3.baidu.com/9fo3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=1cf3b8a1fa246b60640eb474dbfa1a35/b90e7bec54e736d18dd46afa97504fc2d4626979.jpg",
                    name: "001",
                    phoneNum: "13000000001",
                    waiterID: "001"
                },
                {
                    imgUrl: "https://ss3.baidu.com/9fo3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=1cf3b8a1fa246b60640eb474dbfa1a35/b90e7bec54e736d18dd46afa97504fc2d4626979.jpg",
                    name: "001",
                    phoneNum: "13000000001",
                    waiterID: "001"
                },
                {
                    imgUrl: "https://ss3.baidu.com/9fo3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=1cf3b8a1fa246b60640eb474dbfa1a35/b90e7bec54e736d18dd46afa97504fc2d4626979.jpg",
                    name: "001",
                    phoneNum: "13000000001",
                    waiterID: "001"
                }]
        }

    };

    deleteItem(id) {
        this.setState({
            deleteItem: id
        }, () => {
            this.setState({
                showDelect: true,
            })
        })
    }

    addSeriver = () => {
        this.setState({
            showAddSeriver: true,
        })
    };
    notDelete = () => {
        this.setState({showDelect: false});
        console.log("不删除")
    };
    isDelete = () => {
        this.setState({isLoading: true});
        //删除操作
        console.log("删除");
        setTimeout(() => {
            this.setState({isLoading: false, showDelect: false});
        }, 3000);
    };


    notAdd = () => {
        this.setState({showAddSeriver: false});
        console.log("不添加")
    };
    isAdd = () => {
        let imgUrl = this.state.imageUrl;
        let name = this.refs.serviceName.input.value;
        let phone = this.refs.servicePhone.input.value;

        console.group("新增的参数");
        console.log(imgUrl);
        console.log(name);
        console.log(phone);
        console.groupEnd();
        if (name == ""){
            this.state.isValueable.isValueableName = false;
            this.state.isValueable.errNameMsg = "客服昵称不能为空";
            this.setState({
                isValueable: this.state.isValueable
            });
            return
        };
        let regPhone = /^(1[3456789])\d{9}$/
        if (!(regPhone.test(phone))) {
            this.state.isValueable.isValueablePhoen = false;
            this.state.isValueable.errPhoneMsg = "请检查手机号格式";
            this.setState({
                isValueable: this.state.isValueable
            });
            return
        }
        this.setState({isLoading: true});
        //添加操作
        console.log("添加操作");
        setTimeout(() => {
            this.setState({isLoading: false, showAddSeriver: false});
        }, 3000);
    };

    clearErr=()=>{
        this.state.isValueable={
            isValueableName: true,
                errNameMsg: "",
                isValueablePhoen: true,
                errPhoneMsg: "",
        }
        this.setState({isValueable:this.state.isValueable});
    }
    //上传之前的验证
    beforeUpload = (file) => {
        console.log("上传之前的验证");
        const isJPG = file.type === 'image/jpeg';
        if (!isJPG) {
            message.error('You can only upload JPG file!');
        }
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isLt2M) {
            message.error('Image must smaller than 2MB!');
        }
        return isJPG && isLt2M;
    };

    getBase64 = (img, callback) => {
        console.log("获取base64");
        const reader = new FileReader();
        reader.addEventListener('load', () => callback(reader.result));
        reader.readAsDataURL(img);
    };
    changeImg = (info) => {
        console.log("更换图片");
        if (info.file.status === 'uploading') {
            this.setState({loading: true});
            return;
        }
        if (info.file.status === 'done') {
            // Get this url from response in real world.
            this.getBase64(info.file.originFileObj, imageUrl => this.setState({
                imageUrl,
                loading: false,
            }));
        }
    };

    render() {
        return (
            <div className="service">
                <div className="navHeader">
                    <p className="title">
                        客服电话
                    </p>
                </div>
                <div className="addService">
                    <p className="titleText">增加的客服账号会在APP上随机展示</p>
                    <div className="addWaiter" onClick={this.addSeriver}>
                        + 新增客服
                    </div>
                </div>
                <div className="waiterContainer">
                    <table className="waiterList">
                        <thead className="listHeader">
                        <tr>
                            <th>头像</th>
                            <th>昵称</th>
                            <th>手机号</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        {this.state.waiterList.map((item, index) =>
                            <tr key={index} className="listItem">
                                <td className="imgIcorn">
                                    <img src={item.imgUrl} alt=""/>
                                </td>
                                <td className="waiterName">
                                    {item.name}
                                </td>
                                <td>
                                    {item.phoneNum}
                                </td>
                                <td className="phoneNum">
                                    <button className="delete" onClick={() => this.deleteItem(item)}>删除</button>
                                </td>
                            </tr>)
                        }
                        </tbody>
                    </table>
                </div>
                {/*添加客服*/}
                <div className="addServiceModal">
                    <Modal title="新增客服"
                           className="addServiceConatiner"
                           visible={this.state.showAddSeriver}
                           confirmLoading={this.state.isLoading}
                           onOk={this.isAdd}
                           onCancel={this.notAdd}
                           footer={
                               <div className="addServiceBtn">
                                   <Button key="back" onClick={this.notAdd}>取消</Button>
                                   <Button key="submit" onClick={this.isAdd} type="primary"
                                           loading={this.state.isLoading}>
                                       确定
                                   </Button>
                               </div>
                           }
                    >

                        <div className="serviceForm">
                            <div className="uploadImg">
                                <Upload
                                    name="serviceImg"
                                    listType="picture-card"
                                    className="avatar-uploader"
                                    showUploadList={false}
                                    action="//jsonplaceholder.typicode.com/posts/"
                                    beforeUpload={this.beforeUpload}
                                    onChange={this.changeImg}
                                >
                                    {this.state.imageUrl ? <img src={this.state.imageUrl} alt="avatar"/> : <div>
                                        <Icon type={this.state.loading ? 'loading' : 'plus'}/>
                                        <div className="ant-upload-text">Upload</div>
                                    </div>}
                                </Upload>
                            </div>
                            <div className="serviceInfo">
                                <div className="avatar">
                                    {this.state.imageUrl == "" ? <div className="noneImg"></div> :
                                        <img src={this.state.imageUrl} alt="" className="avatarImg"/>}
                                </div>
                                <div className="inputItem">
                                    <label htmlFor="serviceName">客服昵称</label>
                                    <Input id="serviceName" placeholder="请输入客服昵称" ref="serviceName" onKeyDown={this.clearErr}/>
                                    {this.state.isValueable.isValueableName ? <p>&nbsp;</p> :
                                        <p>{"*" + this.state.isValueable.errNameMsg}</p>}
                                    <label htmlFor="servicePhone">客服手机号</label>
                                    <Input id="servicePhone" placeholder="请输客服手机号" ref="servicePhone" onKeyDown={this.clearErr}/>
                                    {this.state.isValueable.isValueablePhoen ? <p>&nbsp;</p> :
                                        <p>{"*" + this.state.isValueable.errPhoneMsg}</p>}
                                </div>
                            </div>
                        </div>
                    </Modal>
                </div>

                {/*删除客服*/}
                <div className="deleteModal">
                    <Modal title="编辑客服人员"
                           visible={this.state.showDelect}
                           confirmLoading={this.state.isLoading}
                           onOk={this.isDelete}
                           onCancel={this.notDelete}
                           footer={
                               <div className="deleteBtn">
                                   <Button key="back" onClick={this.notDelete}>取消</Button>
                                   <Button key="submit" onClick={this.isDelete} type="primary"
                                           loading={this.state.isLoading}>
                                       确定
                                   </Button>
                               </div>
                           }
                    >
                        <p className="deleteMsg">确认要删除客服 <span>{this.state.deleteItem.name}</span>吗?</p>
                    </Modal>
                </div>
            </div>
        );
    }
}

export default phone;






